import React, { useState } from 'react';
    import './index.css';

    const CreateKnowledgeBasePage = () => {
      const [name, setName] = useState('');
      const [description, setDescription] = useState('');

      const handleSubmit = (e) => {
        e.preventDefault();
        if (!name.trim()) {
          alert('知识库名称不能为空！');
          return;
        }
        // In a real app, you would send this data to an API
        console.log('Creating new knowledge base:', { name, description });
        alert(`知识库 "${name}" 创建成功! (模拟)`);
        // Redirect to home page or the new KB page
        window.location.hash = '#/';
      };

      return (
        <div className="container create-kb-page">
          <div className="page-header">
            <h1><i className="fas fa-plus-square"></i> 创建新知识库</h1>
          </div>
          
          <form onSubmit={handleSubmit} className="kb-form">
            <div className="form-group">
              <label htmlFor="kb-name">知识库名称 <span className="required">*</span></label>
              <input
                type="text"
                id="kb-name"
                value={name}
                onChange={(e) => setName(e.target.value)}
                placeholder="例如：产品文档、开发规范"
                required
              />
            </div>
            <div className="form-group">
              <label htmlFor="kb-description">描述 (可选)</label>
              <textarea
                id="kb-description"
                value={description}
                onChange={(e) => setDescription(e.target.value)}
                rows="4"
                placeholder="简要描述这个知识库的内容和用途"
              ></textarea>
            </div>
            <div className="form-actions">
              <button type="submit" className="submit-btn">
                <i className="fas fa-check-circle"></i> 创建知识库
              </button>
              <button type="button" className="cancel-btn" onClick={() => window.location.hash = '#/'}>
                <i className="fas fa-times-circle"></i> 取消
              </button>
            </div>
          </form>
        </div>
      );
    };

    export default CreateKnowledgeBasePage;
